<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ui.js"></script>
<LINK href="css/css.css" type="text/css" rel="stylesheet">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<table width=330px height=100px cellpadding=0 cellspacing=0 border=0>
	<tr height=30px>
		<td id='h01' vAlign='bottom' width=5px><div class='box11'></div></td>
		<td id='h1' vAlign='bottom' width=100px>
				abc
		</td>
		<td id='h12' vAlign='bottom' width=10px><div class='box1'></div></td>
		<td id='h2' vAlign='bottom' width=100px>
				abc
		</td>
		<td id='h23' vAlign='bottom' width=10px><div class='box1'></div></td>
		<td id='h3' vAlign='bottom' width=100px>
				abc
		</td>
		<td id='h34' vAlign='bottom' width=5px><div class='box11'></div></td>
	</tr>
	<tr height=50px>
		<td bgcolor=#c0c0c0 colspan=7>
			<div class='box2'>
				<div id='p1'>
					abc
				</div>
				<div id='p2'>
					edf
				</div>
				<div id='p3'>
					hij
				</div>
			</div>
		</td>
	</tr>
	<tr height=20px>
		<td colspan=7>
			123
		</td>
	</tr>

</table>

<table width=200 height=330 cellpadding=0 cellspacing=0 border=0>
	<tr height=5>
		<td width=165  height=330 bgcolor=#c0c0c0 rowspan=7>
			<div class='box4'>
				<div id='q1'>
					abc
				</div>
				<div id='q2'>
					edf
				</div>
				<div id='q3'>
					hij
				</div>
			</div>
		</td>
		<td width=35 id='s01' align='left' height=5><div class='box3'></div></td>
	</tr>
	<tr height=100>
		<td id='s1' align='left'>abc</td>
	</tr>
	<tr height=10>
		<td id='s12' align='left'><div class='box3'></div></td>
	</tr>
	<tr height=100>
		<td id='s2' align='left'>abc</td>
	</tr>
	<tr height=10>
		<td id='s23' align='left'><div class='box3'></div></td>
	</tr>
	<tr height=100>
		<td id='s3' align='left'>abc</td>
	</tr>
	<tr height=5>
		<td id='s34' align='left'><div class='box3'></div></td>
	</tr>
</table>

<script>
RoundRectangle.wrap($('h1'),7,null,null,'B');
$('h1').resetRoundRectangleColor('#c0c0c0', 'Black');
RoundRectangle.wrap($('h2'),7,null,null,'B');
$('h2').resetRoundRectangleColor('#c0c0c0', 'Black');
RoundRectangle.wrap($('h3'),7,null,null,'B');
$('h3').resetRoundRectangleColor('#c0c0c0', 'Black');

RoundRectangle.wrap($('s1'),7,null,null,'L');
$('s1').resetRoundRectangleColor('#c0c0c0', 'Black');
RoundRectangle.wrap($('s2'),7,null,null,'L');
$('s2').resetRoundRectangleColor('#c0c0c0', 'Black');
RoundRectangle.wrap($('s3'),7,null,null,'L');
$('s3').resetRoundRectangleColor('#c0c0c0', 'Black');

var tc = new TabController(['h1','h2','h3'],['p1','p2','p3'],
		function(tab){
			tab.resetRoundRectangleColor('White', 'Black');
			tab.style.cursor = "pointer";
		},
		function(tab){
			tab.resetRoundRectangleColor('#c0c0c0', 'Black');
			tab.bottomCell.style.backgroundColor = '#c0c0c0';
			tab.style.cursor = "default";
		},
		function(page){
			page.style.display = 'none';
		},
		function(page){
			page.style.display = 'block';
		},
		0);
var tc2 = new TabController(['s1','s2','s3'],['q1','q2','q3'],
		function(tab){
			tab.resetRoundRectangleColor('White', 'Black');
			tab.style.cursor = "pointer";
		},
		function(tab){
			tab.resetRoundRectangleColor('#c0c0c0', 'Black');
			tab.leftCell.style.backgroundColor = '#c0c0c0';
			tab.style.cursor = "default";
		},
		function(page){
			page.style.display = 'none';
		},
		function(page){
			page.style.display = 'block';
		},
		0);

</script>
</BODY>
</HTML>
